<template>
    <div class="nav-bar">
        <NavTabs />
        <NavMenus />
    </div>
</template>
<script lang="ts" setup>
import { onMounted, onBeforeMount, onUnmounted } from 'vue'
import { useConfig } from "@/store/config"
import NavTabs from "./tabs.vue"
import NavMenus from "../navMenu.vue"// 顶部右侧导航栏+右侧aside用于切换布局

const config = useConfig()
</script>
<style lang="scss" scoped>
.nav-bar {
    display: flex;
    height: 50px;
    margin: 20px var(--ba-main-space) 0 var(--ba-main-space);

    :deep(.nav-tabs) {
        display: flex;
        height: 100%;
        position: relative;

        .ba-nav-tab {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 20px;
            cursor: pointer;
            z-index: 1;
            user-select: none;
            opacity: 0.7;
            color: v-bind('config.getColorVal("headerBarTabColor")');

            .close-icon {
                padding: 2px;
                margin: 2px 0 0 4px;
            }

            .close-icon:hover {
                background: var(--ba-color-primary-light);
                color: var(--el-border-color) !important;
                border-radius: 50%;
            }

            //v-bind 可绑定script中的变量
            &.active {
                // 顶栏激活项文字色 headerBarTabActiveColor
                color: v-bind('config.getColorVal("headerBarTabActiveColor")');
            }

            &:hover {
                opacity: 1;
            }
        }

        .nav-tabs-active-box {
            // 顶栏激活项背景色 headerBarTabActiveBackground
            position: absolute;
            height: 40px;
            border-radius: var(--el-border-radius-base);
            background-color: v-bind('config.getColorVal("headerBarTabActiveBackground")');
            box-shadow: var(--el-box-shadow-light);
            transition: all 0.2s;
            -webkit-transition: all 0.2s;
        }
    }
}
</style>
  